<!--
 * @Author: wei_jt@ecidi.com
 * @Date: 2019-11-01 09:37:12
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-13 17:32:05
 * @Description: 绑定表单页
 -->
<template>
  <div
    v-loading.fullscreen.lock="loginLoading"
    class="login-container"
    :element-loading-text="LANG.SOCIAL_LOGINING"
    element-loading-background="rgba(255, 255, 255)"
  >
    <div v-if="!loginLoading" class="login-left-section flex flex-vcenter">
      <div class="bindPage">
        <img src="@/assets/img/login/bind.png" alt="" />
        <div class="title">
          {{ LANG.INPUT_ACCOUNT_TO_BIND }}
        </div>
        <div class="login-form-container">
          <fks-row style="margin-bottom: 20px" :gutter="32">
            <fks-col :span="24">
              <fks-input
                v-model="loginForm.username"
                maxlength="50"
                class="login-input"
                :placeholder="LANG.ACCOUNT_NAME"
              />
            </fks-col>
          </fks-row>
          <fks-row :gutter="32">
            <fks-col :span="24">
              <fks-input
                v-model="loginForm.password"
                type="password"
                maxlength="50"
                class="login-input"
                :placeholder="LANG.ACCOUNT_PWD"
                @keyup.native.enter="handleBind"
              />
            </fks-col>
          </fks-row>
        </div>
        <div class="btn">
          <fks-button class="bind-button" type="primary" @click="handleBind">
            {{ LANG.AUTHORIZE_LOGIN }}
          </fks-button>
          <div style="margin-top: 10px; font-size: 14px">
            <fks-button text @click="toRegister">
              {{ LANG.NO_ACCOUNT_TO_REGISTER }}
            </fks-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GRANT_TYPE } from '@/config'
import { pwdEncrypt } from '@/utils/encryption/pwd'
import { getSMSCaptcha } from './api'
export default {
  name: 'Login',
  data() {
    return {
      smsLoading: false,
      loginType: 'STANDARD',
      loginForm: {
        username: '',
        password: ''
      },
      loading: false,
      token: '',
      loginLoading: true
    }
  },
  mounted() {
    this.socialLogin()
  },
  methods: {
    //跳转注册页面
    toRegister() {
      this.$router.push('/register')
    },
    //根据token进行第三方登录
    socialLogin() {
      this.token = this.$route.query.access_token
      if (!this.token) {
        this.$router.replace('/login')
        return
      }
      this.$store
        .dispatch('socialLogin', this.token)
        .then((res) => {
          if (res === 1) {
            this.redirectTo()
          } else {
            this.loginLoading = false
            return
          }
        })
        .catch(() => {
          this.$router.replace('/login')
        })
    },
    //绑定及登录操作
    handleBind() {
      if (this.errorTip()) return
      let loginData = this.getLoginForm()

      this.$store
        .dispatch('bindUser', loginData)
        .then((res) => {
          this.redirectTo()
        })
        .catch((e) => {
          this.$message.warning(e.response.data)
        })
    },

    //未输入全账号与密码时提示
    errorTip() {
      let username = this.loginForm.username
      let password = this.loginForm.password
      if (!username && !password) {
        this.$message.error(this.LANG.ENTER_ANME_PWD)
        return true
      }
      if (!password || password === '') {
        this.$message.error(this.LANG.ACCOUNT_PWD)
        return true
      }
      if (!username || username === '') {
        this.$message.error(this.LANG.ACCOUNT_NAME)
        return true
      }

      return false
    },
    //登录数据处理
    getLoginForm() {
      let form = {}
      form.grant_type = GRANT_TYPE.password.code
      form.password = pwdEncrypt(this.loginForm.password)
      form.username = this.loginForm.username
      form.access_token = this.token
      return form
    }
  }
}
</script>
<style lang="scss" scoped>
$light_blue: #135dcc;

.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 760px;
  overflow: hidden;

  .login-left-section {
    position: relative;
    justify-content: center;
    width: 100%;
    height: 100%;

    .title {
      height: 21px;
      padding-left: 10px;
      margin-top: 61px;
      margin-bottom: 32px;
      font-size: 16px;
      line-height: 21px;
      color: #85909d;
    }

    .login-form-container {
      position: relative;
      width: 359px;
      padding: 0 10px;
    }

    .btn {
      padding-left: 10px;
      margin-top: 35px;

      ::v-deep .bind-button {
        width: 340px;
        height: 52px;
        border-radius: 4px;
        font-size: 18px;
      }
    }
  }
}

@supports (-webkit-mask: none) and (not (cater-color: $light_blue)) {
  .login-container .fks-input input {
    color: $light_blue;
  }
}
</style>
